<template>
  <div class="home">
	<h3 class="title">工作台</h3>
	<el-button type="warning" style="float: right;" @click="showAddtable=true"><i class="el-icon-plus"></i> 新增餐桌</el-button>
	<el-table :data="tableList" style="width: 100%;" :default-sort="{prop:'state',order:'descending'}">
		<el-table-column prop="zhuid" label="桌号" sortable></el-table-column>
		<el-table-column prop="seat" label="餐桌类型" sortable>
			<template slot-scope="scope">
				<el-tag v-if="scope.row.seat==4" type="info">四人桌</el-tag>
				<el-tag v-if="scope.row.seat==6" type="info">六人桌</el-tag>
				<el-tag v-if="scope.row.seat==8" type="info">八人桌</el-tag>
			</template>
		</el-table-column>
		<el-table-column prop="state" label="当前状态" sortable>
			<template slot-scope="scope">
				<el-tag v-if="scope.row.state" type="warning">用餐中</el-tag>
				<el-tag v-else>空闲</el-tag>
			</template>
		</el-table-column>
		<el-table-column label="开桌时间">
			<template slot-scope="scope">
				<div v-for="i of allTotal" v-if="scope.row.zhuid==i.tableid">{{i.time}}</div>
			</template>
		</el-table-column>
		<el-table-column label="消费金额" sortable>
			<template slot-scope="scope">
				<div v-for="i of allTotal" v-if="scope.row.zhuid==i.tableid">{{i.total}}元</div>
			</template>
		</el-table-column>
		<el-table-column label="操作">
			<template slot-scope="scope">
				<el-button :disabled="!scope.row.state" type="primary" @click="settlement(scope.row.zhuid,scope.row.state)">结账</el-button>
				<el-button :disabled="!scope.row.state" @click="setfree(scope.row.zhuid)">设为空闲桌</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-dialog :visible.sync="wrep">
		<h3 slot="title">
			{{tota.tableid}}号桌 账单详情
		</h3>
		<el-table :data="settlementFood" style="width: 100%">
			<el-table-column prop="foodname" label="菜品名"></el-table-column>
			<el-table-column label="单价">
				<template slot-scope="scope">
					{{scope.row.price}} 元/份
				</template>
			</el-table-column>
			<el-table-column prop="count" label="数量"></el-table-column>
			<el-table-column label="小计">
				<template slot-scope="scope">
					{{scope.row.price*scope.row.count}} 元
				</template>
			</el-table-column>
		</el-table>
		<h2 style="text-align: right;margin-top: 40px;">合计：{{tota.total}}元</h2>
		<span slot="footer">
			<el-button @click="wrep=false">取 消</el-button>
			<el-button type="primary" @click="submitSettlement">确 定</el-button>
		</span>
	</el-dialog>
	
	<el-dialog title="请选择新增餐桌类型" :visible.sync="showAddtable" width="400px">
		<el-radio-group v-model="tableType">
			<el-radio label="4"><el-tag type="info" style="font-size:16px;">四人桌</el-tag></el-radio>
			<el-radio label="6"><el-tag type="info" style="font-size:16px;">六人桌</el-tag></el-radio>
			<el-radio label="8"><el-tag type="info" style="font-size:16px;">八人桌</el-tag></el-radio>
		</el-radio-group>
		<div slot="footer">
			<el-button @click="showAddtable = false">取 消</el-button>
			<el-button type="primary" @click="addTable">确 定</el-button>
		</div>
	</el-dialog>
	
  </div>
</template>

<style>
	.cell{
		text-align: center;
	}
	.title{
		float: left;
		border-left: 2px solid #2c3e50;
		padding-left: 10px;
	}
</style>

<script>
export default {
	data(){
		return{
			tableType:"",
			showAddtable:false,
			tableList:[],
			wrep:false,
			settlementFood:[],
			tota:{
				tableid:0,
				total:0
			},
			allTotal:[]
		}
	},
	methods:{
		setfree(tableid){
			this.$confirm('是否确定在未结账情况下将此桌强行结单?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.axios.get(`${this.$url}/setFree?tableid=${tableid}`).then((response)=>{
					if(response.data==="success"){
						this.$message({
							type: 'success',
							message: '强制结单成功!'
						});
						this.axios.get(`${this.$url}/tableList`).then((response)=>{
							this.tableList=response.data
						})
					}
					else{
						this.$message.error('结单失败...');
					}
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消操作'
				});          
			})
		},
		settlement(tableid,state){
			if(state){
				this.wrep=true
				this.axios.get(`${this.$url}/historyFoodList?tableid=${tableid}`).then((response)=>{
					this.settlementFood=JSON.parse(response.data[0].foodslist)
					this.tota.tableid=response.data[0].tableid
					this.tota.total=response.data[0].total
				})
			}
		},
		submitSettlement(){
			this.wrep=false
			this.axios.get(`${this.$url}/setFree?tableid=${this.tota.tableid}`).then((response)=>{
				if(response.data==="success"){
					this.$message({
						type: 'success',
						message: '结账成功!'
					});
					this.axios.get(`${this.$url}/tableList`).then((response)=>{
						this.tableList=response.data
					})
				}
				else{
					this.$message.error('结账失败...');
				}
			})
		},
		addTable(){
			if(this.tableType){
				this.showAddtable = false
				this.axios.get(`${this.$url}/addTable?tableType=${this.tableType}`).then((response)=>{
					if(response.data==="success"){
						this.$message({
							message: '餐桌添加成功！',
							type: 'success'
						});
					}
					else{
						this.$message.error('添加失败...');
					}
				})
			}
		}
	},
	mounted(){
		this.axios.get(`${this.$url}/tableList`).then((response)=>{
			this.tableList=response.data
		})
		this.axios.get(`${this.$url}/billList`).then((response)=>{
			this.allTotal=response.data
		})
		setInterval(()=>{
			this.axios.get(`${this.$url}/tableList`).then((response)=>{
				this.tableList=response.data
			})
			this.axios.get(`${this.$url}/billList`).then((response)=>{
				this.allTotal=response.data
			})
		},2000)
	}
}
</script>
